<template>
  <div class="">
    <van-tabs v-model="active" @click="change">
      <van-tab
        v-for="(item, index) in nav"
        :key="index"
        :title="item"
      ></van-tab>
    </van-tabs>
    <!-- <ul class="nav">
      <li
        v-for="(item, index) in nav"
        :key="index"
        @click="change(index)"
        :class="{ bg: index == active }"
      >
        {{ item }}
      </li>
    </ul> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: ["全部", "未付款", "已付款", "未发货", "已发货"],
      active: 0,
    };
  },
  mounted() {},
  methods: {
    // change(index) {
    //   this.active = index;
    //   this.$store.commit("setactive", index);
    // },
    change() {
      this.$store.commit("setactive", this.active);
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  display: flex;
  height: 50px;
  li {
    flex: 1;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ccc;
  }
}
.bg {
  background: chocolate;
}
</style>
